<template>
    <div class="burn-down-chart" ref="chartRef"></div>
</template>
  
<script lang="ts" setup>
import { ref, onMounted, computed, watch } from 'vue';
import * as echarts from 'echarts';
import { taskAnalyseStore } from '@/store/taskAnalyse';
const store = taskAnalyseStore()
const chartRef = ref<HTMLElement | null>(null);

const chartData = computed(() => {
    return store.list;
});
watch(chartData, () => {
    renderChart();
});
onMounted(() => {
    renderChart()
});
const renderChart = () => {
    const chart = echarts.init(chartRef.value as any);
    const xAxisData = Object.keys(chartData.value)
    const series = Object.entries(chartData.value).map(([name, stages]: any, index) => {
        console.log(name)
        console.log(stages)
        const data = stages.map(stage => stage.count);
        return {
            name: `${name} - count`,
            type: 'line',
            data,
            lineStyle: {
                color: getLineColor(index),
            },
            emphasis: {
                focus: 'series',
                blurScope: 'coordinateSystem',
                itemStyle: {
                    borderWidth: 2,
                },
            },
        };
    });
    const option = {
        tooltip: {
            trigger: 'axis',
        },
        legend: {
            data: series.map(serie => serie.name),
            textStyle: {
                color: "#fff",
            },
        },
        xAxis: {
            type: 'category',
            data: xAxisData,
            axisLabel: {
                //X轴文字
                fontSize: 14,
                color: "#fff",
            },
        },
        yAxis: {
            type: 'value',
            min: 0,
            axisLabel: {
                //y轴文字
                fontSize: 14,
                color: "#fff",
            },
        },
        series,
    };
    chart.setOption(option);
}
// Helper function to generate line colors
function getLineColor(index: number): string {
    const colors = ['green', 'red', 'blue', 'orange', 'purple'];
    return colors[index % colors.length];
}
</script>
  
<style scoped>
.burn-down-chart {
    width: 100%;
    height: 400px;
}
</style>
  